<template>
  <div>
    <SearchHeader v-model="queryParam.where.keyword" @handleSearch="getData" :can-add="false">
      <Row :gutter="4">

        <Col span="3"><OrganizationTree ref="srhOrgSelect" width="200px" v-model="queryParam.where.orgId"></OrganizationTree> </Col>
        <Col span="3"><Input :placeholder="$t('code')" v-model="queryParam.where.fenceName"></Input> </Col>
        <Col span="3">
          <Select :placeholder="$t('type')" v-model="queryParam.where.alarmType">
            <Option value=null>{{$t('all')}}</Option>
            <Option value=1>{{$t('alaram_cate_2')}}</Option>
            <Option value=2>{{$t('alaram_cate_3')}}</Option>
          </Select>
        </Col>
        <Col span="3"><Date2select ref="dateSelect" v-model="dateRange" :placeholder="$t('date')"></Date2select> </Col>
      </Row>
    </SearchHeader>
    <Card>
      <Table border :columns="columns" :data="tableData">
      </Table>
      <TopnavPage v-model="queryParam.page" @changePage="changePage"></TopnavPage>
    </Card>
  </div>
</template>
<script>
import SearchHeader from '@/view/Common/SearchHeader'
import OrganizationTree from "_c/topnav/OrganizationTree";
import Date2select from "_c/topnav/date2select"
import TopnavPage from '_c/topnav/TopnavPage'
import Fence from '@/api/Fence'
import {apiResult} from "@/libs/util";
export default {
  components:{SearchHeader,OrganizationTree,Date2select,TopnavPage},
  computed:{
    columns(){
      return[
        {title: this.$t('code'), key: 'deviceCode', sortable: true,width: 200,align: 'center',ellipsis:true,tooltip:true,tooltipTheme:'light'},
        {title: this.$t('name'), key: 'deviceName', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'},
        {title: this.$t('organization'), key: 'shortName', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'},
        {title: this.$t('personnel'), key: 'userName', sortable: true, ellipsis:true,width: 150},
        {title: this.$t('time'), key: 'alarmTime', sortable: true,width: 175,align: 'center'},
        {title: this.$t('fence_name'), key: 'fenceName', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'},
        {title: this.$t('alarm_type'), key: 'fenceAlarmTypeDesc', sortable: true, width: 150},
        {title: this.$t('alarm_remark'), key: 'note', sortable: true, width: 150},
        {title: this.$t('longitude'), key: 'longitude', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'},
        {title: this.$t('latitude'), key: 'latitude', sortable: true, width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'}]
    }
  },
  data(){
    return{
      api: new Fence(),

      dateRange: [],
      queryParam: {
        page: {
          pages: 1,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {
          keyword: null,
          orgId:null,
          fenceName:null,
          alarmType:null,
          from:null,
          to:null
        },
      },
      tableData:[],
    }
  },
  methods:{
    getData(){
      /** 生成查询条件 */
      if (!(this.dateRange == null || this.dateRange.length < 2 || this.dateRange[0] == "")) {
        this.queryParam.where.from = this.dateRange[0];
        this.queryParam.where.to = this.dateRange[1];
      }else{
        this.queryParam.where.from = null;
        this.queryParam.where.to = null;
      }

      this.api.alarmQueryPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = null;
        apiResult(res.data,false,result=>{
          this.queryParam.page.total = result.data.total;
          this.tableData = result.data.records;
        });
      })
    },
    changePage() {this.getData()},
  },
  mounted() {
    this.getData();
  }
}

</script>
<style>

</style>
